<template>
	<view class="user-card flex flex-align-center">
		<image class="avatar" :src="userInfo.avatar" mode=""></image>
		<view class="user-info flex-1">
			<view class="flex flex-align-center flex-1 flex-space-between">
				<text class="font32 user-name f-b">{{ userInfo.nickname }}</text>	
				<view v-if="userInfo.mobile" class="flex flex-align-center font24 color-8E8E8E" @click="toPerson">
					个人资料
					<uni-icons color="#8e8e8e" type="forward" size="16"></uni-icons>
				</view>
			</view>
			<view class="grade font24 f-b" v-if="userInfo.mobile">
				{{ userInfo.mobile }}
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	const props = defineProps({
		userInfo: {
			type: Object,
			default: {}
		}
	})
	function toPerson(){
		uni.navigateTo({
			url:'/pages/accompany-tmp/person/person'
		})
	}
</script>

<style lang="scss" scoped>
	.user-card {
		padding: 0 12rpx;
		.user-info {
			margin-left: 20rpx;
			.user-name {
				color: #333333;
			}
		}
		.grade {
			color: #1454FF;
			margin: 16rpx 0 0 0;
		}
	}
	.avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
	}
</style>
